${ html.input(() => { return { type:"text", name:"customData.knownToMeAs", style:"width:150px;margin-right:1ch",placeholder:"Known to me as", title:"Known to me as", value:partner.customData.knownToMeAs || partner.name, bind:`user.customData.partners[${partner._id}].customData.knownToMeAs` }}) }
${ html.input(() => { return { id:"sliderColor", name:"customData.sliderColor", type:"color", style:"margin-right:1ch", title:"Slider color", value:partner.customData.sliderColor, bind:`user.customData.partners[${partner._id}].customData.sliderColor` }}) }
${ html.input(() => { return { type:"checkbox", checked:partner.customData.hide, bind:`user.customData.partners[${partner._id}].customData.hide` }}) } Hide
Name: ${partner.name} (Provide a nickname above)
Is Sharing: ${html.span(()=>Object.keys(partner.customData.isSharing||{}).join(", "))}
${
html.span(() => {
// Get all dimension entries
const dimensionEntries = Object.entries(user.customData.dimensions);
// Separate Happiness and other dimensions
const happinessEntry = dimensionEntries.find(([dim]) => dim === "Happiness");
const otherDimensions = dimensionEntries
.filter(([dim]) => dim !== "Happiness")
.sort(([a], [b]) => a.localeCompare(b));
// Combine arrays with Happiness first
const sortedDimensions = happinessEntry ? [happinessEntry, ...otherDimensions] : otherDimensions;
// Create spans array starting with the share label
const spans = [
html.label(
html.input({
type: "checkbox",
name: "customData.share",
checked: partner.customData.share,
bind: `user.customData.partners[${partner._id}]?.customData.share`,
hidden: window.location.hash === '#connect'
}),
"Share: "
)
];
// Add dimension spans
return sortedDimensions.reduce((spans, [dimension, { tracking, shareWith }]) => {
if(!shareWith) shareWith = (user.customData.dimensions[dimension].shareWith = {});
if (tracking) {
spans.push(
html.span(
html.label(
html.input(() => ({
type: "checkbox",
id: dimension,
checked: shareWith[partner._id] ||= (dimension === "Happiness" || (window.location.hash==="#rsvp" ? partner.customData.isSharing[dimension] : false)),
bind: `user.customData.dimensions[${dimension}].shareWith[${partner._id}]`,
disabled: dimension === "Happiness",
readonly: dimension === "Happiness"
})),
dimension
)
)
);
}
return spans;
}, spans);
})
}
${
(() => {
const actions = [];
if(window.location.hash==="#connect") {
actions.push(html.button({id:"save"},"Save"))
actions.push(html.button({id:"cancel"},"Cancel"))
return actions;
}
if(partner.customData.accepted===0) {
actions.push(html.span("You added this partner. Waiting for RSVP."))
} else if(partner.customData.accepted < 0) {
actions.push("They have: ");
actions.push(html.label(html.input({type:"radio",value:1,checked:partner.customData.accepted===-1,readonly:true,disabled:true}),"Accepted"));
actions.push(html.label(html.input({type:"radio",value:2,checked:partner.customData.accepted===-2,readonly:true,disabled:true}),"Declined"));
} else {
actions.push("You can: ");
actions.push(html.label(html.input({type:"radio",name:"rsvp",value:1,checked:partner.customData.accepted===1,bind:`user.customData.partners[${partner._id}].customData.accepted`}),"Accept"));
actions.push(html.label(html.input({type:"radio",name:"rsvp",value:2,checked:partner.customData.accepted===2,bind:`user.customData.partners[${partner._id}].customData.accepted`}),"Decline"));
}
actions.push(html.button({id:"delete"},"Delete"));
return actions;
})()
}